<template>
  <div class="line-container">
     <div class="line-container-title">
      <p>未来7天游客数量趋势预测图</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <div class="line-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//dom节点
let chartsDom = ref();

//生命周期
onMounted(()=>{
  let myecharts = echarts.init(chartsDom.value);
  myecharts.setOption({
    title:{
      text:"访问量",
    },
    xAxis:{
      type:'category',
      splitLine:{show:false},
      data:['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis:{
      splitLine:{show:false},
      axisLine:{show:true}
    },
    grid:{
      left:40,
      top:0,
      right:0,
      bottom:40
    },
    //系列
    series:[
      {
        type:"line",
        data:[120,240,66,99,321,890,800],
        smooth:true,
        //区域样式填充
        areaStyle:{
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            colorStops:[
              {offset:0,color:'red'},{offset:1,color:'blue'}
            ],
            global:false
          }
        }
      }
    ]
  })
})
</script>
<script lang="ts">
export default {
    name:"Line"
}
</script>

<style scoped>
.line-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
  margin:0 20px;
}

.line-container .line-container-title{
  margin-left: 20px;
}
.line-container .line-container-title p{
  color:white;
  font-size: 20px;
}

.line-container-charts{
  height: calc(100% - 40px);
}
</style>